<template>
  <div>
    <nav ref="nav" data-magnetic>
      <ul>
        <li :class="['relative',activeIndex===index?'is-active':'']" v-for="(item, index) in dataSource"
            :key="index"
            @click="handleClick(item,index)"><a class="cursor-pointer" id="home">{{ item.regionName }}</a></li>
      </ul>
    </nav>
  </div>
</template>

<script setup>
import {ref, watch, onBeforeUnmount} from "vue";

const props = defineProps({
  selectArea: {
    type: String,
    default: ""
  },
  dataSource: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(["changeProvince"]);
const activeIndex = ref(0);
const handleClick = (item, i) => {
  activeIndex.value = i;
  emit("changeProvince", item);
};
watch(
    () => props.selectArea,
    (newVal) => {
      console.log(newVal);
      const index = props.dataSource.findIndex((item) => item.regionName === newVal);
      activeIndex.value = index !== -1 ? index : null;
    }
);
</script>

<style lang="scss" scoped>
ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  flex-wrap: wrap;
  transition: color 0.2s;
  touch-action: none;
}

li {
  font-weight: 400;
  margin-right: 10px;
  color: #959598;

}

li a {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  text-decoration: none;
  font-size: 16px;
  transition: all 0.2s;
}

a:is(:focus-visible, :hover),
ul:has(a:target:is(:focus-visible, :hover))::after {
  color: #333333;
}

ul:has(a:is(:focus-visible, :hover)) {
  --intent: 1;
}

.is-active {
  color: #000000;
  font-weight: bold;

  a {
    transform: scale(1.2);
  }
}

</style>